<template>
    <div class="comment_main_wrap">
        <div class="pageTop">
            <span class="iconfont backHistory" @click="spotCheckView">&#xe6eb;</span>
            <span class="workOrder_header_title">工单信息</span>
            <span class="iconfont home"  v-focusable @click="backToHomepage">&#xe668;</span>
        </div>
        <div class="comment_content">
            <ul>
                <li>
                    <div>
                        <p class="name_status"> <span class="name">{{commentListObj.actOperatorName}}</span> <span class="status">{{statusCase(commentListObj.handleType)}}</span></p>
                        <p class="time">{{commentListObj.updateTime | formatDate}}</p>
                        <p class="desc">{{commentListObj.description}}</p>
                        <div class="files" v-if="commentListObj.files&&commentListObj.files.length">
                            <div>
                                附件：
                            </div>
                            <div class="list">
                                <div class="list-item" v-for="(ele,eleIndex) in commentListObj.files" :key="ele.id">
                                    <img :src="ele.url" alt="" object-fit="contain" @click="showImage(eleIndex,commentListObj.files)" />
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
                <li v-for="(item, index) in commentListObj.workSheetCommentsDTOS" :key="index">
                    <div>
                        <p class="name_status"> <span class="name">{{item.commenterName}}</span></p>
                        <p class="time">{{item.updateTime | formatDate}}</p>
                        <p class="desc">{{item.description}}</p>
                    </div>
                </li>
            </ul>
        </div>
        <div class="bottom_input" v-if="!type && auth">
            <p @click="showCommentImput()">请输入工单评论</p>
        </div>
        <!-- <div v-transfer-dom> -->
            <x-dialog v-model="showDialog" class="comment_dialog" dialog-transition="slideUp" :hide-on-blur="true" :dialog-style="{'max-width': '100%', width: '100%', 'background-color': '#1E1F37!important'}">
                <div class="comment_input_box">
                    <div class="comment_input_body">
                    <x-textarea v-model="comment_content" class="comment_textarea" :max="100" :show-counter="false" placeholder="请输入工单评论，最多不得超过100字" @on-blur="recovery" ref="textarea" :width="335" :height="134"></x-textarea>
                    <!-- <p :class="{set_color: set_color, font_num: true}">{{text_num}}/200个字</p> -->
                    </div>
                    <button class="confirm_btn" @click="addComment" :disabled="!isAllow">确认</button>
                </div>
            </x-dialog>
        <!-- </div> -->
    <showImg :list="fileList" :index="showImgIndex" :show.sync="showImg"></showImg>
    </div>
</template>

<script>
  import { XDialog, XTextarea, TransferDomDirective as TransferDom } from 'vux';
import WorkSheetDao from '@/daos/work_sheet_dao'
import showImg from "@/components/common/showImg/showImg";

export default {
    components:{
        XDialog,
        XTextarea,
        showImg,
    },
    directives: {
      TransferDom
    },
    data() {
        return{
            curDepartment: {
                departmentName:'全企业',
                id:0
            },
            url: '',
            showDialog: false,
            comment_content: '',
            commentListObj:{},
            id: '',
            isAllow: false,
            auth: false,
            imgUrl:'',
            fileList:[],
            showImg:false,
            showImgIndex:0,
        }
    },
    inject: ["backToHomepage"],
    computed: {
        workSheetHandleId() {
            return this.$route.query.workSheetHandleId
        },
        type() {
            return this.$route.query.type == 2
        }
    },
    watch: {
      comment_content: {
        handler() {
          let l = this.comment_content.replace(/\s*/g,"").length
          if (l > 0) {
              this.isAllow = true;
          } else {
            this.isAllow = false;
          }
        }
      }
    },
    mounted() {
        this.getCommentList()
    },
    methods: {
        recovery() {
            window.scroll(0, 0);
        },
        spotCheckView(){
          history.back(-1)
        },
        showCommentImput() {
            this.showDialog = true
            setTimeout(() => {
                this.$refs.textarea.focus()
            }, 10);
            this.id = this.commentListObj.id
        },
        getCommentList() {
            WorkSheetDao.getWorkSheetCommentsDetail({workSheetHandleId:this.workSheetHandleId}, res =>{
                this.commentListObj = res
                if (!this.type) {
                     this.checkCommentAuth(this.commentListObj.workSheetId, this.commentListObj.id) // 查询是否有评论权限
                }
            })

        },
        showImage(index,files) {
            this.fileList.splice(0,this.fileList.length)
            this.fileList = files.map(e=>e.url)
            this.showImgIndex = index
            this.showImg = true;
        },
        statusCase(status) {
            // 1-疑似重复; 2-上报; 3-转办; 4-驳回; 7-推迟处理; 9-解决; 11-验收通过
            switch (status) {
                case 1 :
                    return '疑似重复'
                    break;
                case 2 :
                    return '上报'
                    break;
                case 3 :
                    return '转办'
                    break;
                case 4 :
                    return '驳回'
                    break;
                case 7 :
                    return '推迟处理'
                    break;
                case 9 :
                    return '解决'
                    break;
                case 11 :
                    return '验收通过'
                    break;

                default:
                    return ''
                    break;
            }
        },
        // check 是否有评论权限
        checkCommentAuth(workSheetId, id) {
            WorkSheetDao.getWorkSheetAccessComment({workSheetId}, res =>{
                if (res.data == true) {
                    this.auth = true
                } else {
                    this.auth = false
                }
            },err=>{
                this.auth = false
            })
            // this.$http(this.$API.authWorkSheetComment,{workSheetId: workSheetId},true).then((res) => {
            // if (res.data == true) {
            //     this.auth = true
            // } else {
            //     this.auth = false
            // }
            // })
        },
        // 添加评论
        addComment() {
            WorkSheetDao.postWorkSheetSaveComment({workSheetHandleId:this.id, description: this.comment_content}, res =>{
                console.log(res)
                this.getCommentList() // 更新列表
                this.comment_content = '' // 重置内容
                this.id = '' // 重置id
                this.showDialog = false //收起评论框
            })
            // this.$http(this.$API.addWorkSheetComment,{workSheetHandleId:this.id, description: this.comment_content},true).then((res) => {
            // })
        },
    }
}
</script>

<style lang="less" socped>
    .comment_main_wrap{
        overflow: hidden;
        background-color: #18182C;
        min-height: 100%;
        height: 100%;
        .backHistory{
            transform:rotate(90deg);
            -ms-transform:rotate(90deg); 	/* IE 9 */
            -moz-transform:rotate(90deg); 	/* Firefox */
            -webkit-transform:rotate(90deg); /* Safari 和 Chrome */
            -o-transform:rotate(90deg);
            line-height:44px;
            font-size:25px !important;
            margin-left:10px;
        }
        .pageTop{
            height: 44px;
            color: rgb(255, 255, 255,0.3);
            position: fixed;
            width: 100%;
            left: 0px;
            top: 0px;
            background-color: #22233f;
            .workOrder_header_title{
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
                font-size: 16px;
            }
            .home{
                float:right;
                line-height:44px;
                font-size:17px;
                margin-right:15px;
            }
        }
        .comment_content{
            padding-top: 44px;
            background-color: #18182C;
            height: calc(~'100% - 120px');
            ul{
                height: 100%;
                margin-top: 10px;
                box-sizing: border-box;
                overflow: auto;
                -webkit-overflow-scrolling: touch;
                li{
                    padding: 15px 0 10px;
                    margin: 0 14px;
                    box-sizing: border-box;
                    &:first-child{
                        padding: 20px 14px 16px;
                        margin: 0;
                        background-color: #22233FFF;
                    }
                    &:not(:first-child){
                        border-bottom: 1px solid rgba(255,255,255,0.4)
                    }
                    .name_status{
                        overflow: hidden;
                        line-height: 22px;
                        .name,.status{
                            color: #fff;
                            font-size: 15px;
                        }
                        .name{
                            float: left;
                        }
                        .status{
                            float: right;
                            color: rgba(255,255,255,0.5)
                        }
                    }
                    .time{
                        margin-left: -100%;
                        margin-top: -6px;
                        width: 200%;
                        font-size: 20px;
                        transform: scale(0.5) translate(50%, 0);
                        color: rgba(255,255,255,0.5)
                    }
                    .desc{
                        font-size: 15px;
                        color: #fff;
                        line-height: 24px;
                    }
                }
            }

            .files{
                display: flex;
                color: #eee;
                font-size: 14px;
                .list{
                    flex: 1;
                    display: flex;
                    flex-wrap: wrap;
                }
                .list-item{
                    img {
                        width: 100px;
                        height: auto;
                        margin-right: 6px;
                    }
                }
            }
        }
        .bottom_input{
            position: fixed;
            left: 0;
            right: 0;
            bottom: 0;
            padding: 15px 14px;
            background-color: #22233FFF;
            p{
                padding: 8px 10px;
                border-radius: 8px;
                border: 1px solid rgba(255,255,255,0.4);
                background: transparent;
                color: rgba(255,255,255,0.4);
                box-sizing: border-box;
                font-size: 15px;
            }
        }
    }
    .confirm_btn{
        width: 100%;
        text-align: center;
        border: none;
        outline: none;
        background: initial;
        font-size: 18px;
        line-height: 44px;
        color: #456DE6;
        &:disabled{
            color: #3C4B8FFF;
        }
    }
</style>
<style lang="less">
.comment_main_wrap{
    .comment_dialog{
        .weui-dialog{
            top: unset;
        }
    }
  .comment_textarea{
    font-size: 15px;
    .weui-textarea{
        &::-webkit-input-placeholder{
            color: #999999FF!important;
            font-size: 15px!important;
            margin: 0!important;
            padding: 0!important;
            text-align: left!important;
        }
        padding-left: 10px;
        padding-top: 10px;
        background: transparent;
        border-radius: 8px;
        border: 1px solid rgba(255,255,255,0.4);
        color: #fff;
    }
  }
}
</style>